<template>
  <el-drawer
    title="历史记录"
    :visible.sync="historyStore.show"
    :with-header="false"
    direction="btt"
    size="100%"
    class="history__drawer-overlay"
    custom-class="history__wrapper"
    :modal="false"
    @close="handleClose"
    v-click-outside="handleClose"
  >
    <history-content />
  </el-drawer>
</template>

<script>
import { mapGetters } from 'vuex'
import HistoryContent from './content.vue'
export default {
  name: 'History',
  components: {
    HistoryContent
  },
  data () {
    return {
      show: false
    }
  },
  watch: {
    'historyStore.show' (val) {
      const self = this
      setTimeout(() => {
        self.show = val
      }, 500)
    }
  },
  computed: {
    ...mapGetters(['historyStore'])
  },
  created () {
  },
  mounted () {
  },
  methods: {
    handleClose () {
      if (this.show) {
        this.$store.dispatch('history/setStatus', false)
      }
    }
  }
}
</script>

<style lang="scss">
.history__drawer-overlay {
  width: 100%;
  padding-top: 46px;
  .el-drawer {
    background: #000000!important;
    border-radius: 10px 10px 0px 0px;
  }
}
.history__wrapper {
  .el-drawer__body {
    padding: 0;
    height: 100%;
  }
}
</style>
